<template>
  <!-- 主体布局 -->
  <div class="common-layout">
      <!-- 使用Element UI的container进行页面布局 -->
      <el-container>
        <!-- 侧边栏，固定宽度为200px，背景色为深灰色 -->
        <el-aside width="200px" style="height: 1000px; background-color: #545c64;;">
          <!-- 引入Aside组件 -->
          <Aside style="border-right: 1px;"></Aside>
        </el-aside>
        <!-- 主要内容容器 -->
        <el-container>
          <!-- 头部区域，高度为100px，背景色为浅灰色 -->
          <el-header  style="height: 100px; background-color: slategray;">
                 <!-- 引入Header组件 -->
                 <Header/> 
          </el-header>
          <!-- 主要内容区域 -->
          <el-main>
              <!-- 路由视图，用于展示动态组件 -->
              <RouterView />
          </el-main>
          <!-- 底部区域 -->
          <el-footer>
              <!-- 引入Footer组件 -->
              <Footer/>
          </el-footer>
        </el-container>
      </el-container>
  </div>
</template>

<script setup lang="ts">
// 引入Aside组件，放置于侧边栏
import Aside from '@/components/AsideComponent.vue'
// 引入Footer组件，放置于底部
import Footer from '@/components/FooterComponent.vue'
// 引入Header组件，放置于头部
import Header from '@/components/HeaderComponent.vue'

// 引入路由链接和路由视图组件，用于实现页面导航和内容展示
import { RouterLink, RouterView } from 'vue-router'
</script>

<style scoped >
/* 此处添加组件的私有样式 */
</style>